<template>
  <div id="app">
    <!-- 
      action:存放的是文件上传到服务器的接口地址
    -->
    <div>
      <!-- <el-upload
        drag
        action="/single1"
        :show-file-list="false"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :on-change="changeFile"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          app将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload> -->

      <!-- IMG -->
      <!-- <div class="uploadImg" v-if="img">
        <img :src="img" alt />
      </div> -->
    </div>
    <!-- <h1>535345</h1> -->
    <el-button type="success" @click="generalUploadFun">一般文件上传</el-button>
    <el-button type="warning" @click="bigFileUploadFun">大文件上传</el-button>
    <el-button type="danger" @click="breakpointResumeFun">断点续传</el-button>
    <GeneralUpload v-if="uploadWay === 'generalUploadWay'"></GeneralUpload>
    <BigFileUpload v-else-if="uploadWay === 'bigFileUploadWay'"></BigFileUpload>
    <BreakpointResume v-else-if="uploadWay === 'breakpointResumeWay'"></BreakpointResume>
    <!-- <AppThree></AppThree>
    <h1>组件内部的东西</h1>
    <AppExcel></AppExcel> -->
  </div>
</template>

<script>
// import { component } from "vue/types/umd";
/*
 * 文件上传有两套方案：
 *   1. 基于文件流（form-data）  element-ui上传组件默认是基于文件流的
 * * 默认上传
 *   格式：multipart/form-data
 *   数据格式：form-data
 *   2. 客户端需要把文件转化为BASE64
 *
 * element-ui上传默认上传
 *   格式：multipart/form-data
 *   数据格式：form-data
 *      file 文件流信息
 *      filename 文件名字
 *   上传成功后获取服务器返回信息，通知on-success回调函数执行
 * 内部封装了ajax
 */
import GeneralUpload from "./components/GeneralUpload";
import BigFileUpload from "./components/BigFileUpload";
import BreakpointResume from "./components/BreakpointResume";
// import AppExcel from "./components/App4Excel";
export default {
  name: "App",
  components: {
    BigFileUpload,
    BreakpointResume,
    GeneralUpload,
    // AppExcel,
  },
  data() {
    return {
      img: null,
      uploadWay: "generalUploadWay",
    };
  },
  methods: {
    generalUploadFun() {
      //Z这是我们的一般上传时间
      this.uploadWay = "generalUploadWay";
    },
    bigFileUploadFun() {
      this.uploadWay = "bigFileUploadWay";
    },

    breakpointResumeFun() {
      //断点续传；
      this.uploadWay = "breakpointResumeWay";
    },
    // changeFile() {},
    // handleSuccess(result) {
    //   if (result.code == 0) {
    //     this.img = result.path; //
    //   }
    // },
    // beforeUpload(file) {
    //   // 格式校验
    //   let { type, size } = file;
    //   if (!/(png|gif|jpeg|jpg)/i.test(type)) {
    //     this.$message("文件合适不正确~~");
    //     return false;
    //   }
    //   if (size > 200 * 1024 * 1024) {
    //     this.$message("文件过大，请上传小于200MB的文件~~");
    //     return false;
    //   }
    //   return true;
    // },
  },
};
</script>

